<template>
    <view class="user-distribution-income rel" v-if="isLoad">
        <!-- <back></back> -->
        <view
            class="bg abs"
            :style="{ background: `linear-gradient(180deg, ${primaryColor} 0%, #fff 100%)` }"
        ></view>
        <view class="flex-center pd-lg rel">
            <image
                mode="aspectFill"
                class="avatar radius"
                :src="
                    detail.avatarUrl || `https://lbqny.migugu.com/admin/anmo/mine/default_user.png`
                "
            >
            </image>
            <view class="flex-1 ml-lg f-md-title c-base ellipsis">{{ detail.user_name }}</view>
        </view>

        <view class="mine-menu-list fill-base radius-16 rel" style="margin-top: 0">
            <view class="flex-between pd-lg b-1px-b">
                <view class="f-paragraph c-title">可提现(元)</view>
                <view class="f-md-title c-title">{{ detail.cash }}</view>
            </view>
            <view class="flex-warp pt-md">
                <view
                    class="item-child flex-center flex-column"
                    :class="[{ 'b-1px-r': index !== 2 }]"
                    v-for="(item, index) in countList"
                    :key="index"
                >
                    <view class="f-sm-title c-title text-bold">{{ detail[item.key] }}</view>
                    <view class="f-icontext c-caption">{{ item.text }}</view>
                </view>
            </view>
            <view class="flex-center pt-lg pb-lg">
                <view
                    @tap.stop="$util.goUrl({ url: `/user/pages/distribution/record?type=6` })"
                    class="cash-btn flex-center f-mini-title c-base radius"
                    style="color: #5b5b5b; border: 1rpx solid #979797"
                >
                    提现记录
                </view>
                <view
                    @tap.stop="$util.goUrl({ url: `/user/pages/cash-out?type=salesman` })"
                    class="cash-btn flex-center ml-lg f-mini-title c-base radius"
                    :style="{ background: primaryColor, border: `1rpx solid ${primaryColor}` }"
                >
                    我要提现
                </view>
            </view>
        </view>

        <image
            @tap.stop="$util.goUrl({ url: `/agent/pages/poster/channel?type=1` })"
            class="salesman-channel-share mt-md ml-md"
            src="https://lbqny.migugu.com/admin/anmo/mine/salesman-channel-share.png"
        >
        </image>

        <view class="fill-base mt-md ml-md mr-md pt-lg pl-lg pr-lg pb-md radius-16">
            <view class="f-mini-title c-title text-bold">渠道明细</view>
            <view
                @tap.stop="goDetail(index)"
                class="list-item pt-lg pb-lg b-1px-b"
                v-for="(item, index) in list.data"
                :key="index"
            >
                <view class="flex-between">
                    <view class="f-paragraph c-title text-bold">{{ item.user_name }}</view>
                    <view class="f-icontext" :style="{ color: primaryColor }">查看更多</view>
                </view>
                <view class="flex-between">
                    <view class="flex-y-center f-desc c-paragraph"
                        >总成交金额<view class="ml-sm">¥{{ item.order_price }}</view>
                    </view>
                    <view class="flex-y-center f-caption c-caption"
                        >返佣<view class="ml-sm c-warning"> ¥{{ item.salesman_cash }} </view>
                    </view>
                </view>
            </view>
            <abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1"> </abnor>
        </view>
        <view class="space-footer"></view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import tabbar from "../components/tabbar.vue";
export default {
    components: {
        tabbar,
    },
    data() {
        return {
            isLoad: false,
            countList: [
                {
                    key: "total_cash",
                    text: "累计佣金(元)",
                },
                {
                    key: "wallet_cash",
                    text: "已提现(元)",
                },
                {
                    key: "order_price",
                    text: "总成交金额(元)",
                },
            ],
            detail: {},
            param: {
                page: 1,
            },
            list: {
                data: [],
            },
            loading: true,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
    }),
    onLoad() {
        this.initIndex();
    },
    onUnload() {
        this.$util.back();
    },
    onPullDownRefresh() {
        // #ifndef APP-PLUS
        uni.showNavigationBarLoading();
        // #endif
        this.initRefresh();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.list.current_page >= this.list.last_page || this.loading) return;
        this.param.page = this.param.page + 1;
        this.loading = true;
        this.getList();
    },
    methods: {
        ...mapMutations([]),
        async initIndex(refresh = false) {
            // #ifdef H5
            if (!refresh && this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });

            this.$util.showLoading();
            this.detail = await this.$api.salesman.index();
            this.getList();
            this.isLoad = true;
            this.$util.hideAll();
        },
        initRefresh() {
            this.param.page = 1;
            this.initIndex(true);
        },
        async getList() {
            let { list: oldList, param } = this;
            let newList = await this.$api.salesman.salesmanChannelCash(param);

            if (this.param.page == 1) {
                this.list = newList;
            } else {
                newList.data = oldList.data.concat(newList.data);
                this.list = newList;
            }
            this.loading = false;
            this.$util.hideAll();
        },
        goDetail(index) {
            let { id, user_name } = this.list.data[index];
            this.$util.goUrl({
                url: `/user/pages/salesman/record?id=${id}&title=${user_name}`,
            });
        },
    },
};
</script>

<style lang="scss">
.user-distribution-income {
    .bg {
        width: 100%;
        height: 388rpx;
    }

    .mine-menu-list {
        margin: 20rpx 20rpx 0 20rpx;

        .cash-btn {
            width: 250rpx;
            height: 70rpx;
            transform: rotateZ(360deg);
        }

        .item-child {
            width: 33.33%;
            margin: 10rpx 0;

            .iconfont {
                font-size: 86rpx;
            }
        }

        .item-child.b-1px-r::after {
            top: 38rpx;
            bottom: 38rpx;
        }
    }

    .salesman-channel-share {
        width: 710rpx;
        height: 180rpx;
    }
}
</style>
